<template>
  <div>
    <CustomForm
      ref="formRef"
      :options="formColumns"
      inline
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useProduct } from '@/hooks'

import CustomForm from '@/components/form/src/index.vue'
defineOptions({
  name: 'ProductBaseInfo'
})

const { productNameList, getProductNameList } = useProduct()

const formColumns = ref([
  {
    label: '产品名称',
    prop: 'pdCode',
    value: '',
    type: 'select',
    attrs: {
      filterable: true,
      remote: true,
      'remote-method': getProductNameList,
    },
    children: productNameList,
  },
  {
    label: '开始日期',
    prop: 'startDate',
    value: '',
    type: 'date-picker',
  },
  {
    label: '结束日期',
    prop: 'endDate',
    value: '',
    type: 'date-picker',
  },
])

watch(() => formColumns.value[0].value, val => {
  if(!val) return
  const product = productNameList.value.find(item => {
    return item.value === val
  })

  formColumns.value[1].value = product.createDate
  formColumns.value[2].value = product.endDate
})

</script>
